<!-- StrategyList.svelte -->
<script lang="ts">
	import type { PageData } from './$types'
	import { goto } from '$app/navigation'

	import {
		Tabs,
		TabItem,
		Table,
		TableBody,
		TableBodyCell,
		TableBodyRow,
		TableHead,
		TableHeadCell,
		Select,
		TableSearch,
	} from 'flowbite-svelte'
	import {
		UserCircleSolid,
		GridSolid,
		AdjustmentsVerticalSolid,
		ClipboardSolid,
	} from 'flowbite-svelte-icons'
	import type { Klt } from '$lib/bindings'

	export let data: PageData
	let searchTerm = ''
	let klt_selected: Klt = 'DAY'
	let klt_list = [
		{ value: 'DAY', name: '日K线' },
		{ value: 'WEEK', name: '周K线' },
		{ value: 'MONTH', name: '月K线' },
		{ value: 'M005', name: '05分钟K线' },
		{ value: 'M015', name: '15分钟K线' },
		{ value: 'M030', name: '30分钟K线' },
		{ value: 'M060', name: '60分钟K线' },
	]

	// 如果需要在组件内部生成数据，可以移除上面的export语句并添加以下代码：
	// const generateSampleStrategy = ... // 保持之前的generateSampleStrategy函数定义
	//
	// const strategies = [];
	// for (let i = 1; i <= 100; i++) {
	//   strategies.push(generateSampleStrategy(i));
	// }

	let hoveredRowIndex: number | null = null

	function handleRowHover(index: number) {
		hoveredRowIndex = index
	}

	function handleRowUnhover() {
		hoveredRowIndex = null
	}

	function click_row(e: any, strategy: any): any {
		let target = e.target as Element
		if (target.closest('a')) return // If the click was originated from a button, do nothing (or handle accordingly)
		goto(`/strategies/${strategy.id?.id.String}`)
	}

	function goToPage(page: number) {
		goto(`/strategies?page=${page + 1}`)
	}
</script>

<div class="bg-gray-200 w-full h-svh overflow-y-auto">
	<Tabs style="underline" contentClass="p-0 bg-gray-50  dark:bg-gray-800 mt-0">
		<TabItem open>
			<div slot="title" class="flex items-center gap-2">
				<UserCircleSolid size="sm" />
				All Strategies
			</div>
			<div class="overflow-auto w-full h-full flex flex-col">
				<div class="flex px-4 py-1">
					{#if data.currentPage > 0}
						<button
							on:click={() => goToPage(data.currentPage - 1)}
							class="px-2 uppercase bg-blue-400 flex-grow-0"
						>
							Prev
						</button>
					{:else}
						<button class="px-2 uppercase bg-gray-400 flex-grow-0"> Prev </button>
					{/if}

					<button
						on:click={() => goToPage(data.currentPage + 1)}
						class="px-2 uppercase bg-red-400 mx-8 flex-grow-0"
					>
						Next
					</button>

					<Select class="mx-2 w-min rounded-none p-0" items={klt_list} bind:value={klt_selected} />
					<button
						on:click={() => goToPage(data.currentPage + 1)}
						class="px-2 uppercase bg-green-400 flex-grow-0"
					>
						New
					</button>
				</div>
				<TableSearch
					placeholder="Search by maker name"
					hoverable={true}
					bind:inputValue={searchTerm}
				>
					<TableHead defaultRow={false}>
						<tr class="bg-gray-400 text-left font-medium text-gray-900 uppercase sticky top-0 z-10">
							<TableHeadCell padding="pr-2" class="text-nowrap" colspan="5"></TableHeadCell>
							<TableHeadCell padding="pr-2" class="text-nowrap" colspan="8"
								>回测最大收益</TableHeadCell
							>
							<TableHeadCell padding="pr-2" class="text-nowrap" colspan="4"
								>回测最小收益</TableHeadCell
							>
							<TableHeadCell padding="pr-2" class="text-nowrap" colspan="1"></TableHeadCell>
						</tr>
						<tr
							class="bg-gray-400 text-left text-xs font-medium text-gray-900 uppercase sticky top-0 z-10"
						>
							<TableHeadCell padding="pr-2" class="text-nowrap">策略编号</TableHeadCell>
							<TableHeadCell padding="pr-2" class="text-nowrap">策略名称</TableHeadCell>
							<TableHeadCell padding="pr-2" class="text-nowrap">策略K线</TableHeadCell>
							<TableHeadCell padding="pr-2" class="text-nowrap">策略序号</TableHeadCell>
							<TableHeadCell padding="pr-2" class="text-nowrap">活动机器</TableHeadCell>

							<TableHeadCell padding="pr-2" class="text-nowrap">证券1</TableHeadCell>
							<TableHeadCell padding="pr-2" class="text-nowrap">收益1</TableHeadCell>

							<TableHeadCell padding="pr-2" class="text-nowrap">证券2</TableHeadCell>
							<TableHeadCell padding="pr-2" class="text-nowrap">收益2</TableHeadCell>

							<TableHeadCell padding="pr-2" class="text-nowrap">证券3</TableHeadCell>
							<TableHeadCell padding="pr-2" class="text-nowrap">收益3</TableHeadCell>

							<TableHeadCell padding="pr-2" class="text-nowrap">证券4</TableHeadCell>
							<TableHeadCell padding="pr-2" class="text-nowrap">收益4</TableHeadCell>

							<TableHeadCell padding="pr-2" class="text-nowrap">证券-1</TableHeadCell>
							<TableHeadCell padding="pr-2" class="text-nowrap">收益-1</TableHeadCell>

							<TableHeadCell padding="pr-2" class="text-nowrap">证券-2</TableHeadCell>
							<TableHeadCell padding="pr-2" class="text-nowrap">收益-2</TableHeadCell>
							<TableHeadCell padding="pr-2" class="text-nowrap">Ops</TableHeadCell>
						</tr>
					</TableHead>
					<TableBody tableBodyClass="divide-y">
						{#if data.strategies && data.strategies.length > 0}
							{#each data.strategies as strategy, index (strategy.id)}
								<TableBodyRow
									class=" hover:bg-green-400"
									tabindex={index}
									on:mouseover={() => handleRowHover(index)}
									on:focus={() => handleRowHover(index)}
									on:mouseout={() => handleRowUnhover()}
									on:blur={() => handleRowUnhover()}
									on:click={(e) => click_row(e, strategy)}
								>
									<TableBodyCell>{strategy.id?.id.String}</TableBodyCell>
									<TableBodyCell>{strategy.name}</TableBodyCell>
									<TableBodyCell>{strategy.klt}</TableBodyCell>
									<TableBodyCell>{strategy.seqno}</TableBodyCell>

									<TableBodyCell>(6) AAPL,GOOGL,TSLA,MSFT,AMZN</TableBodyCell>

									<TableBodyCell>600519</TableBodyCell>
									<TableBodyCell>{strategy.avgYield}</TableBodyCell>
									<TableBodyCell>300519</TableBodyCell>
									<TableBodyCell>{strategy.maxYield}</TableBodyCell>
									<TableBodyCell>000519</TableBodyCell>
									<TableBodyCell>{strategy.minYield}</TableBodyCell>

									<TableBodyCell>000319</TableBodyCell>
									<TableBodyCell>{strategy.minYield}</TableBodyCell>

									<TableBodyCell>300009</TableBodyCell>
									<TableBodyCell>{strategy.minYield}</TableBodyCell>

									<TableBodyCell>301009</TableBodyCell>
									<TableBodyCell>{strategy.minYield}</TableBodyCell>
									<TableBodyCell>
										<a
											class="px-1 text-blue-600 underline"
											href="/tbots/|${strategy.id?.id.String}"
										>
											TBots
										</a>
									</TableBodyCell>
								</TableBodyRow>
							{/each}
						{/if}
						<TableBodyRow>
							<TableBodyCell colspan="21">Bottom Line-----</TableBodyCell>
						</TableBodyRow>
					</TableBody>
				</TableSearch>
			</div>
		</TabItem>

		<TabItem>
			<div slot="title" class="flex items-center gap-2">
				<GridSolid size="sm" />
				Favorite Strategies
			</div>
			<p class="text-sm text-gray-500 dark:text-gray-400">
				<b>Favorite Strategies:</b>
				{#each Array.from({ length: 60 }, (_, i) => i) as number}
					Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
					ut labore et dolore magna aliqua. {number}<br />
				{/each}
			</p>
		</TabItem>

		<TabItem>
			<div slot="title" class="flex items-center gap-2">
				<GridSolid size="sm" />
				Stock Strategies
			</div>
			<p class="text-sm text-gray-500 dark:text-gray-400">
				<b>Stock Strategies:</b>
				{#each Array.from({ length: 60 }, (_, i) => i) as number}
					Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
					ut labore et dolore magna aliqua. {number}<br />
				{/each}
			</p>
		</TabItem>

		<TabItem>
			<div slot="title" class="flex items-center gap-2">
				<GridSolid size="sm" />
				Etf Strategies
			</div>
			<p class="text-sm text-gray-500 dark:text-gray-400">
				<b>Etf Strategies:</b>
				{#each Array.from({ length: 60 }, (_, i) => i) as number}
					Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
					ut labore et dolore magna aliqua. {number}<br />
				{/each}
			</p>
		</TabItem>

		<TabItem>
			<div slot="title" class="flex items-center gap-2">
				<GridSolid size="sm" />
				Open Funds Strategies
			</div>
			<p class="text-sm text-gray-500 dark:text-gray-400">
				<b>Open Funds Strategies:</b>
				{#each Array.from({ length: 60 }, (_, i) => i) as number}
					Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
					ut labore et dolore magna aliqua. {number}<br />
				{/each}
			</p>
		</TabItem>

		<TabItem>
			<div slot="title" class="flex items-center gap-2">
				<GridSolid size="sm" />
				Convertible Bonds Strategies
			</div>
			<p class="text-sm text-gray-500 dark:text-gray-400">
				<b>Convertible Bonds Strategies:</b>
				{#each Array.from({ length: 60 }, (_, i) => i) as number}
					Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
					ut labore et dolore magna aliqua. {number}<br />
				{/each}
			</p>
		</TabItem>

		<TabItem>
			<div slot="title" class="flex items-center gap-2">
				<GridSolid size="sm" />
				Dashboard
			</div>
			<p class="text-sm text-gray-500 dark:text-gray-400 max-h-48">
				<b>Dashboard:</b>
				{#each Array.from({ length: 30 }, (_, i) => i) as number}
					Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
					ut labore et dolore magna aliqua. {number}<br />
				{/each}
			</p>
		</TabItem>
	</Tabs>
</div>
